<template>
  <div>
    <section class="artist-msg-section">
      <h3>歌手简介</h3>
      <p>
        {{ desc }}
      </p>
      <p>{{ resNull }}</p>
    </section>
    <section v-for="item of intro" class="artist-msg-section" :key="item.ti">
      <h3>{{ item.ti }}</h3>
      <p>
        {{ item.txt }}
      </p>
    </section>
  </div>
</template>

<script lang="ts">
import { APIType } from "@/api";
import { Vue, Component } from "vue-property-decorator";
import { Route } from "vue-router";
@Component({})
export default class ArtistMsgComponent extends Vue {
  public desc: string = null;
  public intro: any[] = [];
  public resNull = "";

  $api: APIType;
  $route: Route;

  public mounted() {
    this.$api.getArtistDesc(this.$route.params.id).then((result) => {
      this.desc = result.briefDesc;
      this.intro = result.introduction;
      if (!this.desc) {
        this.resNull = "该歌手还没有相关信息";
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.artist-msg-section {
  padding: 0.1rem;
  margin: 0.1rem 0;
  > h3 {
    border-left: 3px solid red;
    padding-left: 0.1rem;
  }
  > p {
    color: #666;
  }
}
</style>
